<template>
  <div class="mine-page-layout">
    <div :class="['mine-base', vip && 'vip']">
      <div v-show="!isWechat" class="nav" />

      <div class="account">
        <div class="info">
          <van-image round width="60px" height="60px" :src="avatar" />
          <div class="desc">
            <div class="name">
              {{ name | empty }}
              <div v-show="vip" class="vip-icon">
                <img src="@/assets/icons/vip.png" alt />
                <div class="text">年</div>
              </div>
            </div>
            <div class="point">
              <van-icon name="points" size="15" />
              <span class="number">{{ point }}</span>
              <span v-if="vip" class="deadline">会员到期至：{{ deadline }}</span>
            </div>
          </div>
        </div>

        <div class="setting">
          <van-icon name="setting-o" size="20" color="#ffffff" @click="vip = !vip" />
        </div>
      </div>
    </div>

    <div v-if="!vip" class="vip-block">
      <div class="vip-card">
        <div class="container">
          <div class="desc">
            <img src alt />
            开通会员学习海量课程
          </div>
          <div class="action">立即开通</div>
        </div>
      </div>
    </div>

    <div :class="[vip && 'vip-placeholder']" />

    <course-progress title="简历精修课" :progress="30" />

    <grid-group />

    <product-block
      mode="row-image"
      title="最近收藏"
      desc="查看全部"
      :style="{ marginTop: '5px' }"
      @arrow="$router.push({ name: 'mine-collection' })"
    />

    <feedback :style="{ margin: '5px 0' }" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage } from 'vant'
import { mapGetters } from 'vuex'
import ProductBlock from '@/components/Product/Block'
import CourseProgress from './CourseProgress'
import GridGroup from './GridGroup'
import Feedback from './Feedback'

Vue.use(VanImage)

export default {
  components: {
    CourseProgress,
    ProductBlock,
    GridGroup,
    Feedback
  },

  data() {
    return {
      point: '1325',
      deadline: '2021-06-23',
      vip: false
    }
  },

  computed: {
    ...mapGetters(['avatar', 'name', 'browser']),

    isWechat() {
      return this.browser.toLowerCase().indexOf('micromessenger') > -1
    }
  }
}
</script>

<style lang="less" scoped>
.mine-page-layout {
  .vip-placeholder {
    width: 100vw;
    height: 100px;
  }

  .mine-base {
    background: linear-gradient(to right, #80bafc, #4c88f7);
    position: absolute;
    top: 0;
    overflow: hidden;

    .nav {
      height: 46px;
      width: 100vw;
    }

    .account {
      width: calc(100vw - 34px);
      margin: auto;
      padding: 14px 18.5px 15.5px 15.5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .info {
        display: flex;
        align-items: center;

        .desc {
          margin-left: 11px;
          color: #ffffff;

          .name {
            font-size: 18px;
            font-weight: 500;
            display: flex;
            align-items: center;

            .vip-icon {
              margin-left: 6px;
              display: flex;
              align-items: center;

              img {
                width: 20px;
                position: relative;
                z-index: 1;
              }

              .text {
                height: 15px;
                width: 40px;
                background: linear-gradient(to right, rgba(0, 0, 0, 0), #7F5219, rgba(240, 183, 107, 0.2));
                margin-left: -25px;
                font-size: 10px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #F8CA8A;
                border-radius: 2px;
                position: relative;
                z-index: 0;
                padding-right: 6px;
              }
            }
          }

          .point {
            margin-top: 6px;
            font-size: 14px;
            font-weight: 300;
            display: flex;
            align-items: center;

            .number {
              margin-left: 4px;
            }
          }
        }
      }
    }
  }

  .vip {
    background: linear-gradient(to right, #24262f, #1d1c21);
    padding-bottom: 10px;
    border-radius: 0;

    .account {
      .info {
        .desc {
          color: #f8ca8a;

          .deadline {
            margin-left: 15px;
            font-size: 12px;
            color: #76644e;
          }
        }
      }
    }
  }

  .vip-block {
    border-radius: 0 0 50% 50%;
    overflow: hidden;
    background: linear-gradient(to right, #80bafc, #4c88f7);
    margin-top: 89.5px;

    .vip-card {
      width: calc(100vw - 78px);
      margin: auto;
      height: 50px;
      background: linear-gradient(to right, #f9dcb0, #fdead1, #f4ca90);
      border-radius: 15px 15px 0 0;
      padding: 15px 27px 0 17px;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .desc {
          font-size: 14px;
          color: #7f5219;
          display: flex;
          align-items: center;

          img {
            width: 16.5px;
            height: 15px;
            margin-right: 8px;
          }
        }

        .action {
          height: 25px;
          border-radius: 12.5px;
          background-color: #7f5219;
          color: #ffffff;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 12px;
        }
      }
    }
  }
}
</style>